<div class="box">
  <div class="row">
    <x-button (click)="open('top-start', 'top start')">top start</x-button>
    <x-button (click)="open('top', 'top')">top(default)</x-button>
    <x-button (click)="open('top-end', 'top end')">top end</x-button>
  </div>
  <div class="row">
    <x-button (click)="open('left', 'left')">left</x-button>
    <x-button (click)="open('center', 'center')">center</x-button>
    <x-button (click)="open('right', 'right')">right</x-button>
  </div>
  <div class="row">
    <x-button (click)="open('bottom-start', 'bottom start')">bottom start</x-button>
    <x-button (click)="open('bottom', 'bottom')">bottom</x-button>
    <x-button (click)="open('bottom-end', 'bottom end')">bottom end</x-button>
  </div>
</div>
